<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            /* width: 200px; */
            height: 200px;
            overflow: hidden;
            background-color: red;
        }
        #box li{
           list-style: none;
           /* width: 100px; */
           height: 20px;
           background-color: pink;

        }

    </style>
</head>

<body>
    <div>
        <input id="int" type="text"><button>百度搜索</button>
        <div id="box"></div>
    </div>
    <script>
        //封装函数--判断POST和Get方法的url问题
        function formate(url, data) {
            var type = "GET"
            if (arguments.length === 1) {
                type = "POST"
                data = url
                url = ""
            }
            var start = true
            for (var key in data) {
                if (type === "GET") {
                    url += (start ? "?" : "&") + key + "=" + data[key]
                } else if (type === "POST") {
                    url += (start ? "" : "&") + key + "=" + date[key]
                }
                start = false
            }
            return url
        }
        //封装ajax函数--不刷新请求数据
        function ajax(options) {
            //配置默认5个参数
            Object.assign({
                method: "GET",
                //响应数据
                callback: function () { },
                //参数
                url: "",
                //jsonp的数据 ,回调函数的名字
                data: {},
                jsonpcallback: "callback",
            }, options);
            if (options.method === "jsonp") {
                var script = document.createElement("script")
                script.src = formate(options.url, options.data);
                document.body.appendChild(script)
                // console.log(script);
                window[options.jsonpcallback] = function (data) {
                    options.callback(data);
                }
                script.onload = function () {
                    script.remove()
                }
            } else {
                var xhr = new XMLHttpRequest()
                xhr.open(options.method, options.method.toUpperCase() === "GET" ? formate(options.url, options.data) : options.url)
                //判断是POST请求方式，要添加请求头
                if (options.method.toUpperCase() === "POST") {
                    xhr.setRequestHeader("content--type", "application/x-www/form-urlencoded")
                }
                if (xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)) {
                    options.callback(xhr.responseText)
                }
            }
        }
        // ?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32218,1425,31672,32139,31254,32045,32230,32299,31639&wd=123&req=2&csor=5&pwd=hell&cb=jQuery110209460874033153552_1594630926712&_=1594630926722
        // ?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32218,1425,31672,32139,31254,32045,32230,32299,31639&wd=123&req=2&csor=5&pwd=hell&cb=jQuery110209460874033153552_1594630926712&_=1594630926722

        // ajax({
        //     method: "jsonp",
        //     url: "https://www.baidu.com/sugrec",
        //     data: {
        //         pre: 1,
        //         p: 3,
        //         ie: "utf-8",
        //         json: 1,
        //         prod: "pc",
        //         from: "pc_web",
        //         sugsid: "32218,1425,31672,32139,31254,32045,32230,32299,31639",
        //         wd: "大",
        //         req: 2,
        //         csor: 5,
        //         cb: "callback",
        //         _: Date.now()
        //     },
        //     jsonpcallback: "callback",
        //     callback: function (data) {
        //         console.log(data.g);
        //     }
        // })
        int.onchange = function () {
            var con = int.value
            console.log(con);
            ajax({
                method: "jsonp",
                url: "https://www.baidu.com/sugrec",
                data: {
                    pre: 1,
                    p: 3,
                    ie: "utf-8",
                    json: 1,
                    prod: "pc",
                    from: "pc_web",
                    sugsid: "32218,1425,31672,32139,31254,32045,32230,32299,31639",
                    wd:con,
                    req: 2,
                    csor: 5,
                    cb: "callback",
                    _: Date.now()
                },
                jsonpcallback: "callback",
                callback: function (data) {
                    // console.log(data.g);
                    data.g.map(function(item,index){
                        console.log(item.q);
                        box.innerHTML+=`<li>${item.q}</li>`
                    })
                }
            })
        }
    </script>
</body>

</html>